<template>
  <div>
    <group>
      <selector placeholder="请选择" v-model="subject" title="科目" name="district" :options="subjectList" @on-change="onChange"></selector>
      <x-number title="考试次数" :value="num" :min="1" @on-change="change"></x-number>
      <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
        <thead>
        <tr style="background-color: #F7F7F7">
          <th>姓名</th>
          <th>平均排名</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(value,index) in avrList">
          <td>{{value.studentName}}</td>
          <td>{{value.avgRank}}</td>
        </tr>
        </tbody>
      </x-table>
    </group>
  </div>
</template>
<script>
  import { Group, Cell, Divider, XTable, XNumber, Selector } from 'vux'

  export default {
    components: {
      Group,
      Cell,
      Divider,
      XTable,
      XNumber,
      Selector
    },
    created: function () {
      this.$http.get('jeewx/scoreAnalyzeController.do?getAverageRank&num=' + this.num + '&subject=' + this.subject)
       .then(function (res) {
         let json = JSON.parse(res.body.jsonStr)
         this.avrList = json.obj
         this.avrList.sort(function (a, b) { return a.avgRank - b.avgRank })
       })
    },
    methods: {
      change (val) {
        this.num = val
        this.$http.get('jeewx/scoreAnalyzeController.do?getAverageRank&num=' + this.num + '&subject=' + this.subject)
          .then(function (res) {
            let json = JSON.parse(res.body.jsonStr)
            this.avrList = json.obj
            this.avrList.sort(function (a, b) {
              return a.avgRank - b.avgRank
            })
          })
      },
      onChange (value) {
        this.subject = value
        this.$http.get('jeewx/scoreAnalyzeController.do?getAverageRank&num=' + this.num + '&subject=' + this.subject)
          .then(function (res) {
            let json = JSON.parse(res.body.jsonStr)
            this.avrList = json.obj
            this.avrList.sort(function (a, b) {
              return a.avgRank - b.avgRank
            })
          })
      }
    },
    data () {
      return {
        num: 3,
        subjectList: ['全部', '语文', '数学', '英语', '政治', '历史', '地理'],
        avrList: [],
        subject: '全部'

      }
    }
  }
</script>

<style scoped>

</style>
